<template>
  <el-row class="main-container">
    <el-col :span="12" style="align-items: center;">
      <el-row align="middle" style="height: 100%;">
        <h4 style="margin-right:28px;">{{ state.title }}</h4>

        <template v-for="(item, index) in state.menus">
          <el-text :style="getTextStyle(item)" @click="handleOpen(item)">
            {{ item.comment }}
          </el-text>
          <el-divider v-if="index < state.menus.length - 1" direction="vertical" />
        </template>
      </el-row>
    </el-col>
    <el-col :span="12" style="align-items: center;text-align: right;">
      <el-avatar :src="squareUrl" style="margin: 10px 0;" />
      <el-dropdown style="margin: 22px 0 0 10px; color: white;">
        <span class="el-dropdown-link">
          {{ state.user.fullname }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="changePassVisible = true">修改密码</el-dropdown-item>
            <el-dropdown-item @click="visible = true;">个人信息</el-dropdown-item>
            <el-dropdown-item divided @click="handleLogut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
  </el-row>

  <el-dialog title="个人信息" width="650" v-model="visible">
    <UpdateUserForm v-if="isEdit" :form-data="state.user" @emit-change-user="changeUserHandler" />
    <UserInfoDesc v-else>
      <el-button @click="isEdit = true">编辑</el-button>
    </UserInfoDesc>
  </el-dialog>
  <ChangePassDialog :status="changePassVisible" @emit-status="emitChangePassHandler" />
</template>

<script setup>
import UserInfoDesc from '../views/User/UserInfoDesc.vue';
import UpdateUserForm from '../views/User/UpdateUserForm.vue';
import ChangePassDialog from '../views/User/ChangePassDialog.vue';

import { ref, reactive, computed, getCurrentInstance, onMounted, watch } from 'vue';
import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router'
import { HomeFilled, ArrowDown } from '@element-plus/icons-vue';
import avatar from '../assets/avatar.jpg';

const { proxy: { $utils } } = getCurrentInstance();
// const iconComponent = markRaw(HomeFilled)
const router = useRouter()
const route = useRoute();
const store = useStore();
const squareUrl = ref(avatar);
const visible = ref(false);
const isEdit = ref(false);
const changePassVisible = ref(false);
const state = reactive({
  title: '任务管理系统',
  menus: [],
  user: {}
});

watch(() => store.getters['user/getUser'], user => {
  if ($utils.isValidValue(user)) userSetting(user);
}, { immediate: true, deep: true });

function emitChangePassHandler(data) {
  changePassVisible.value = data.status;
  if (!data.status) {
    setTimeout(() => handleLogut(), 3000)
  }
}

async function handleLogut() {
  await router.push({ path: '/login' });
  store.commit('user/clearUser');
  store.commit('enums/clearEnums');
  localStorage.removeItem('token');
}

function changeUserHandler(data) {
  isEdit.value = data.editing;
}

function handleOpen({ path }) {
  router.push({ path })
}

function getTextStyle({ path }) {
  return {
    cursor: 'pointer',
    color: 'white',
    textDecoration: route.path === path ? 'underline' : 'none'
  };
}

function userSetting(user) {
  const menus = [
    { path: '/tasks', comment: '任务管理', role: 1 },
    { path: '/users', comment: '人员管理', role: 2 },
  ];
  state.menus =  menus.filter(item => (user.role & item.role) == item.role);
  Object.entries(user).forEach(([key, value]) =>
    state.user[key] = value);
}
</script>